<!--  -->
<template>
	<div class="streaming">
		<header>
			<van-icon  name="arrow-left" @click="Goback"/>
			<span>直播特卖</span>
			<span></span>
		</header>
		<main>
			<div class="nav">
				<div class="left">
					<van-swipe
						class="my-swipe"
						:autoplay="3000"
						indicator-color="white"
					>
						<van-swipe-item
							><img src="../../images/bargain/banner-1.png" alt=""
						/></van-swipe-item>
						<van-swipe-item><img src="../../images/bargain/banner-02.jpg" alt=""></van-swipe-item>
						<van-swipe-item
							><img src="../../images/bargain/banner-03.jpg" alt=""
						/></van-swipe-item>
						<van-swipe-item><img src="../../images/bargain/banner-04.jpg" alt=""></van-swipe-item>
					</van-swipe>
				</div>
				<div class="right">
					<img src="../../images/bargain/list-2.png" alt="" />
					<li>
						<img src="../../images/u5738.jpg" alt="" style="width:200px;height:100px;"/>
					</li>
				</div>
			</div>
			<div class="bootom">
				<img src="../../images/bargain/cucci.jpg" alt="" />
				<img src="../../images/bargain/cucci.jpg" alt="" />
				<img src="../../images/bargain/list-1.png" alt="" />
				<img src="../../images/bargain/list-1.png" alt="" />
			</div>
			<div class="shop" :style="{ height: shopHeight }" :data="showData">
				<dl
					v-for="(item, index) in showData"
					:key="index"
					ref="shopRef"
					:style="styleList[index]"
					@click="Gomovie(item)"
				>
					<template v-if="item.length > 1">
						<p class="size">
							<span>推荐</span>

							--美女搭配--
						</p>
						<ul style="height:215px">
							<li v-for="(ite, ind) in item" :key="ind">
								<img :src="ite.img" alt="" />
								<p>{{ ite.title }}</p>
							</li>
						</ul>
					</template>
					<template v-else>
						<dt>
							<img
								:src="item.img"
								alt=""
								:style="{ height: heightList[index] }"
							/>
						</dt>
						<dd>
							<p>
								<span v-if="item.message" class="spanb"
									>正在直播</span
								>
								{{ item.title }}
							</p>
							<span class="spanc">¥{{ item.price }}</span>
							<b>{{ item.num }}人付款</b>
							<b>...</b>
						</dd>
					</template>
				</dl>
			</div>
		</main>
	</div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import axios from 'axios'
import { Dialog } from "vant";
import Vue from "vue";
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
	components: {
	},
	data() {
		return {
			showData: [],
			shopHeight: 0,
			heightList: [],
			styleList: [],
			MAX_ITEM_HEIGHT: 180,
			MIN_ITEM_HEIGHT: 140,
		};
	},
	created() {
		axios('/showList').then((res) => {
			console.log(res);
			this.showData = res.data.list;
		});
		axios('/showList').then((res) => {
			res.data.list.splice(3, 0, [
				{
					img: require("../../images/bargain/tool-1.png"),
					title: "上班族清新搭",
				},
				{
					img: require("../../images/bargain/tool-2.png"),
					title: "出游甜美风搭",
				},
				{
					img: require("../../images/bargain/tool-1.png"),
					title: "休闲运动风搭",
				},
				{
					img: require("../../images/bargain/tool-2.png"),
					title: "俏皮可爱风搭",
				},
			]);
			this.showData = res.data.list;

			this.getRandomHeight();
			this.$nextTick(() => {
				this.setStylePosition();
			});
		});
	},
	methods: {
		Gomovie(item) {
			console.log(item);
			if (item.message) {
				this.$router.push("/radio");
			} else {
				Dialog({ message: "直播已结束" });
			}
		},
		Goback() {
			this.$router.push("/layout/home");
		},
		setStylePosition() {
			let leftHeightTotal = 0,
				rightHeightTotal = 0,
				marginTop = 10;
			this.$refs.shopRef.forEach((item) => {
				let styleObj = {};
				if (leftHeightTotal <= rightHeightTotal) {
					styleObj = {
						left: "0",
						top: leftHeightTotal + marginTop + "px",
					};
					leftHeightTotal += item.clientHeight + marginTop;
				} else {
					styleObj = {
						right: "0",
						top: rightHeightTotal + marginTop + "px",
					};
					rightHeightTotal += item.clientHeight + marginTop;
				}
				this.styleList.push(styleObj);
			});
			this.shopHeight =
				leftHeightTotal >= rightHeightTotal
					? leftHeightTotal
					: rightHeightTotal;
		},
		getRandomHeight() {
			if (this.showData) {
				this.showData.forEach(() => {
					this.heightList.push(
						Math.floor(
							Math.random() *
								(this.MAX_ITEM_HEIGHT -
									this.MIN_ITEM_HEIGHT +
									1) +
								this.MIN_ITEM_HEIGHT
						) + "px"
					);
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 20px;
	line-height: 300px;
	text-align: center;
	background-color: #39a9ed;
	img {
		height: 100%;
	}
}
.streaming {
	font-size: 18px;
	padding: 0 15px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
header {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
}

main {
	flex: 1;
	.nav {
		width: 100%;
		display: flex;
		height: 260px;
		.left {
			width: 49%;
			.my-swipe {
				height: 265px;
			}
		}
		.right {
			flex: 1;
			list-style: none;
			li {
				margin-top:9px;
			}
			img {
				display: block;
			}
		}
	}
	.bootom {
		height:120px;
		display: flex;
		margin-top: 10px;
		img {
			display: block;
			height: 120px;
			width: 23%;
			margin: 0 auto;
		}
	}
}
.shop {
	width: 100%;
	position: relative;
	dl {
		width: 48%;
		height: max-content;
		position: absolute;
		background: #f5f5f5;
		padding: 5px;
		text-align: center;
		border-radius: 7%;
		dt {
			img {
				width: 100%;
				border-radius: 7%;
			}
		}
		dd {
			font-size: 16px;
			text-align: left;
			p {
				margin-bottom: 5px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 14px;
			}
			b {
				font-size:14px;
				color: #666;
			}
			span {
				// color: orangered;
				margin-right: 8px;
			}
		}
		ul {
			width: 100%;
			position: relative;
			height: max-content;
			display: flex;
			flex-wrap: wrap;
			flex-shrink: 0;
			li {
				width: 46%;
				margin: 3px;
				img {
					width: 100%;
				}
				p {
					font-size:10px;
					width: 100%;
				}
			}
		}
		:nth-child(2) b {
			margin-left: 10px;
		}
	}
}
.spanb {
	padding:4px 8px;
	background: red;
	border-radius:15px;
	color: #fff;
	text-align: center;
}
.spanc {
	color: orangered;
}
.size {
	span {
		font-weight: bold;
		font-size:16px;
		color: orangered;
	}
}
</style>
